<template>
  <gl-page @onRefresh="getData">
    <uv-navbar title="问题答疑" placeholder :leftIcon="null"></uv-navbar>
    <uv-gap height="30"></uv-gap>
    <view style="padding: 0 30rpx">
      <uv-search
        placeholder="请输入搜索内容"
        v-model="keyword"
        :showAction="false"
      ></uv-search>
    </view>
    <uv-gap height="30"></uv-gap>
    <uv-collapse :border="false">
      <uv-collapse-item
        v-for="i in data"
        :title="i.title"
        :name="i.id"
        :border="true"
      >
        <text style="color: #666">{{ i.content }}</text>
      </uv-collapse-item>
    </uv-collapse>
  </gl-page>
</template>

<script setup>
import { watchEffect, ref } from "vue";

const source = [
  {
    id: 1,
    title: "马浩？",
    content: "你找我干啥呀",
  },
  {
    id: 2,
    title: "我有一个问题？",
    content: "问题分很多种，你到底啥问题",
  },
  {
    id: 3,
    title: "我也不知啥问题？",
    content: "问题分很多种，你到底啥问题",
  },
];

const data = ref([]);
const keyword = ref("");
const collapseValue = ref([]);

watchEffect(() => {
  data.value = source.filter((i) => {
    const keywordArr = keyword.value.split("");
    return keywordArr.every(
      (k) => i.title.includes(k) || i.content.includes(k)
    );
  });
  // collapseValue.value = data.value.map((i) => i.id);
});

function getData(stopDownPull) {
  console.log("下拉刷新");
  stopDownPull();
}
</script>

<style lang="scss" scoped></style>
